<template>
	<div class="tool-title-box">
		<h3>画布设置</h3>
		<div class="operation-box">
			<div class="item-box">
				<div class="title">网页标题</div>
				<div class="modify-box w100">
					<el-input type="textarea" size="small" placeholder="请输入网页标题" autosize v-model="terminalContent.title"></el-input>
				</div>
			</div>
			<div class="item-box flex-style">
				<div class="title">画布宽度</div>
				<div class="block">
					<el-slider :show-input-controls="false" input-size="mini" :min="350" :max="2000" v-model="terminalContent.width" show-input></el-slider>
				</div>
			</div>
			<div class="item-box">
				<div class="title">背景颜色</div>
				<div class="Info">{{terminalContent.bgColor}}</div>
				<div class="modify-box">
					<div class="color-box">
						<span @click="terminalContent.bgColor = ''">重置</span>
						<div class="block">
							<el-color-picker v-model="terminalContent.bgColor"></el-color-picker>
						</div>
					</div>
				</div>
			</div>
			<tool-single-img v-model:imageUrl="terminalContent.imageUrl" tip="背景图片"></tool-single-img>
			<div class="item-box mt10">
				<div class="title">删除确认</div>
				<div class="modify-box">
					<el-switch v-model="terminalContent.confirm" active-text="开" inactive-text="关"/>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive, computed, watch } from 'vue';
	import { useStore } from '/@/store/index';
	import { Local } from '/@/utils/storage';
	
	import ToolSingleImg from '/@/views/decorator/components/toolBar/module/tool-single-img.vue';
	
	export default {
		name: 'canvas-tool',
		components: { ToolSingleImg },
		setup() {
			const store = useStore();
			const state = reactive({
				
			});
			
			state.terminalContent = computed(() => store.state.decorator.terminalContent);
			
			watch(() => state.terminalContent, () => {
				Local.set('terminalContent', state.terminalContent);
			}, {deep: true});
			
			return {
				...toRefs(state)
			}
		},
	}
</script>

<style lang="scss" scoped>
@import './toolBar/basics/scss/index.scss';
</style>